<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>第三题</title>
        <style>
            *{
            margin: 0 ;
            padding: 0 ;
            font-family: 微软雅黑;
            }
            div{
                border: 0 none;
            }
            table{
                width: 100%;
                border:0 none;
                border-collapse: collapse;
                margin: 0 auto
            }

            table  td {
                border: 1px solid #d3d3d3;
                height: 10px;
            }
            table  th {
                border: 1px solid #d3d3d3;
                height: 30px;

            }
            .title{
                width: 1200px;
                margin: 0 auto;
            }
            .top{
                height: 30px;
                line-height: 30px;
                border: 1px solid #d3d3d3;
                background-color: #e6e6e6;
                padding-left: 15px;
            }
            .center{
                border: 1px solid #aaaaaa;
                border-top:0 none;
            }
            .btn{
                width: 40px;
                height: 25px;
            }
            .page {
                height:30px;
                background-color: #ccedea;
                text-align:center
            }
        </style>
        <script src = '../work/jquery-1.12.4.min.js'></script>
        <script src = '../js/exam.js'></script>
        <script>
            //定义通过ID获取页面元素的方法
            var $ = function(a) {
                return document.getElementById(a);
            };
            //定义通过Class获取页面元素的方法
            var $list = function(z) {
                return document.getElementsByClassName(z);
            };
            //表示选中的行
            var _rows;
            var _row;
            //数据
            var i = 1;
            data = [
                {id:i++, name:"王涛", sex:1, remark:"备注"},
                {id:i++, name:"赵文卓", sex:1, remark:"备注"},
                {id:i++, name:"张容", sex:0, remark:"备注"},
                {id:i++, name:"工艺", sex:1, remark:"备注"},
                {id:i++, name:"公益", sex:1, remark:"备注"},
                {id:i++, name:"省市", sex:0, remark:"备注"},
                {id:i++, name:"张小", sex:1, remark:"备注"},
                {id:i++, name:"电池", sex:0, remark:"备注"},
                {id:i++, name:"删除", sex:1, remark:"备注"},
                {id:i++, name:"哇啊", sex:0, remark:"备注"},
                {id:i++, name:"哈哈", sex:1, remark:"备注"},
                {id:i++, name:"画画", sex:1, remark:"备注"}
            ];
            //构建表格
            var grid = function(d) {
                //表格的对象
                table = document.getElementById('cateGrid');
                //清除表格原有的对象   rows  表示所有的对象
                while (table.rows.length > 1){
                    table.deleteRow(table.rows.length - 1);
                }

                //对齐原则  数字靠右   文字靠左   内容长度固定 居中
                for ( var  i = 0; i<d.length;i++){
                var row = table.insertRow(-1);
                row.onmouseover = function () {
                    if (this.style.backgroundColor != 'blue'){
                        this.style.backgroundColor = '#efefef';
                    }
                };
                row.onmouseout = function () {
                    if (this.style.backgroundColor != 'blue') {
                        this.style.backgroundColor = '';
                    }
                };
                row.onclick = function () {
                   //每次选中行对象的时候，先清除之前选中对象的样式
                    if(_row){
                        _row.style.backgroundColor = '';
                    }
                    this.style.backgroundColor = 'blue';
                    _row = this;
                };



                    //td 复选框
                var cell = row.insertCell(-1);
                cell.style.textAlign = "center";
                cell.innerHTML = '<input type="checkbox" class="chkbox" value=" ' + d[i].id + ' " />';
               //行对象tr添加属性
                row.setAttribute('_id',d[i].id);
                //td name
                 cell = row.insertCell(-1);
                 cell.textContent = d[i].name;
                 row.setAttribute('_name',d[i].name);

                //td sex
                 cell = row.insertCell(-1);
                 cell.style.textAlign = "center";
                 cell.textContent =(d[i].sex) ? '男':'女';
                row.setAttribute('_sex',d[i].sex);
                //td remark
                 cell = row.insertCell(-1);
                 cell.textContent = d[i].remark;
                row.setAttribute('_remark',d[i].remark);
            }
            };

            //表格的数据 | 总的页数 | 默认每页笔数 | 当前是第几页
            var  grid_page = 0, page_num = 5, page = 0;
            //表格的对象
            var grid_obj;
            //清除数据
            var clear = function() {
                //如果表格的行数 > 1的话
                while (grid_obj.rows.length > 1) {
                    grid_obj.deleteRow(-1);
                }
            };

            //分页的方法 默认每页10笔数据
            var goPage = function(p) {
                //记录当前页数
                page = p;
                //一共有几页
                grid_page = Math.ceil(data.length / page_num);
                //先清除数据
                clear();
                //填充数据
                var _new = [];
                var start = (p - 1) * page_num;
                for (var i = 0; i < page_num; i++) {
                    if (data[start]) {
                        //alert(data[start++]);
                        _new.push(data[start++]);
                       /* grid(data[i++]);*/
                    }
                }
                grid(_new);
                  document.getElementById('spaNum').innerText = page;
                  document.getElementById('spaAll').innerText = grid_page;

            };

            window.onload = function () {
                grid_obj = document.getElementById('cateGrid');
                page = 1;
                goPage(page);

                //分页按钮事件
                document.getElementById('btnHome').onclick = function() {
                    if (1 == page) {
                        alert('已经是第一页!');
                        return false;
                    } else {
                        goPage(1);
                    }
                };
                document.getElementById('btnPrev').onclick = function() {
                    if (1 == page) {
                        alert('已经是第一页!');
                        return false;
                    } else {
                        goPage(--page);
                    }
                };
                document.getElementById('btnNext').onclick = function() {
                    if (page == grid_page) {
                        alert('已经到最后一页!');
                        return false;
                    } else {
                        goPage(++page);
                    }
                };
                document.getElementById('btnLast').onclick = function() {
                    if (page == grid_page) {
                        alert('已经到最后一页!');
                        return false;
                    } else {
                        goPage(grid_page);
                    }
                };
                //分页按钮事件
                document.getElementById('selPageNum').onchange = function() {
                    page_num = this.value;
                    goPage(1);
                };
               /* grid(data);*/
                //新增按钮
                $('btnAdd').onclick = function () {
                    //打开窗口
                   win(600,400,'新增',document.getElementById('editForm'));
                    //录入信息
                    //保存信息  刷新表格，关闭窗口
                    //添加数据到数组
                    //刷新表格
                    document.getElementById('theForm').reset();
                    document.getElementById('text1').value = '系统自动生成';
                    goPage(page);

                };
                //复选框的全选
                var oBtn1 = $("check1");
                var aChk = document.getElementsByTagName('input');
                oBtn1.onclick = function (){
                    if(this.checked)
                    {
                        for (var i=0; i<aChk.length; i++)
                        {
                            aChk[i].checked=true;
                        }
                    }
                    else {
                        for (var i=0; i<aChk.length; i++)
                        {
                            aChk[i].checked = false;
                        }
                    }

                };
                //查询
                $('btn1').onclick = function () {
                    var _name = $('txt').value;
                    if(_name === ""){
                        goPage(page);
                    }else{
                        var _ = [];
                        for (var i = 0;i<data.length;i++){
                            /* //全匹配
                             if(data[i].name === _name){
                             _.push(data[i]);
                             }*/
                            //模糊查询
                            if(data[i].name.indexOf(_name) > -1){
                                _.push(data[i]);
                            }
                        }
                        grid(_);
                    }

                };
                //删除
                $('btnSel').onclick = function () {
                    var ids=[];//数组，存放需要删除的id
                    var _ = document.getElementsByClassName('chkbox');
                    var status = false;
                    for (var i=0;i<_.length;i++){
                        if (_[i].checked){
                            ids.push(_[i].value);
                            status = true;
                        }
                    }
                    if (status){
                        if (confirm('你确定要删除吗？')){
                        ids = ids.reverse();
                        for (var i = 0;i<ids.length;i++){
                            for (var j = 0;j<data.length;j++){
                                if (data[j].id == ids[i] - 0){
                                    data.splice(j,1);
                                }
                            }
                        }
                      goPage(page);
                        }
                    }else {
                        alert('请先选择要删除的数据!');
                    }
                };
                //编辑
                $('btnUpd').onclick = function () {
                   if (_row){
                      //打开窗口
                      /* document.getElementById('text1').value = '';
                       document.getElementById('text2').value = '';
                       document.getElementById('select1').value = 1;
                       document.getElementById('text3').value = '';*/
                       win(600,400,'编辑',document.getElementById('editForm'));
                       //录入信息
                       //保存信息  刷新表格，关闭窗口
                       //添加数据到数组
                       //刷新表格
                       //var id = _row.getAttribute('_id');
                       document.getElementById('text1').readonly = 'readonly';
                       document.getElementById('text1').value = _row.getAttribute('_id');
                       document.getElementById('text2').value  = _row.getAttribute('_name');
                       document.getElementById('select1').value  = _row.getAttribute('_sex');
                       document.getElementById('text3').value =_row.getAttribute('_remark');
                       //for (var i = 0; i<data.length;i++){
                           //if (data[i].id === id - 0){
//                               data[i].name = document.getElementById('text2').value;
//                               data[i].sex = document.getElementById('select1').value;
//                               data[i].remark = document.getElementById('text3').value;
//                               break;
//                           }
//                       }
                      //goPage(page);
                     }
                     else {
                       alert('请选择需要修改的数据！')
                   }
                };
            };
        </script>
    </head>
    <body>
    <div class="title" id="title1">
        <div class="top" id="top1" style="">查询</div>
        <div class="center" id="center1" style="position: relative;height: 40px;">
            <div style="position: absolute;top:10px;">
                名称<input type="text" id="txt" value=""/>
            </div>
            <div style="position: absolute;left: 200px;top: 5px;">
            <button id="btn1" style="width: 80px;height: 30px;">查询</button>
            </div>
        </div>
    </div>
    <br/>
    <div class="title" id="title2">

        <div class="top" id="top2">
            <span style="font-weight: bold">表格</span>
            <button class="btn" id="btnAdd">新增</button>
            <button class="btn" id="btnUpd">编辑</button>
            <button class="btn" id="btnSel">删除</button>
        </div>
        <div class="center" id="center2">
            <table id="cateGrid">
                <tr style="border: 1px solid #c1bec0;">
                  <th width="5%"><input type="checkbox" id="check1"/></th>
                  <th width="10%">名称</th>
                  <th width="10%">性别</th>
                  <th width="75%">备注</th>
                </tr>
            </table>
        </div>
        <div class = 'page'>
            <button id = 'btnHome'>首页</button>
            <button id = 'btnPrev'>上页</button>
            &nbsp;第<span id = 'spaNum'></span>页 / 一共有<span id = 'spaAll'></span>页&nbsp;
            <button id = 'btnNext'>下页</button>
            <button id = 'btnLast'>末页</button>
            每页<select id = 'selPageNum'><option value = 5>5</option><option value = 10>10</option><option value = 20>20</option></select>笔
        </div>
        <div id = 'editForm' style = 'display:none'>
            <form id="theForm" class = 'form' method = 'post' action = ''>
                <table class = 'table' id="table1">
                    <tr>
                        <th class = 'th' style = 'width:20%'>ID</th>
                        <td class = 'td' style = 'width:30%'>
                            <input class = 'input' id="text1" type = 'text' style = 'padding-left:5px' readonly="readonly" />
                        </td>
                        <th class = 'th' style = 'width:20%'>姓名</th>
                        <td class = 'td' style = 'width:30%'>
                            <input class = 'input' id="text2" value="" type = 'text' style = 'padding-left:5px' />
                        </td>
                    </tr>
                    <tr>
                        <th class = 'th'>性别</th>
                        <td class = 'td'>
                            <select class = 'select' id="select1">
                                <option value = 1>男</option>
                                <option value = 0>女</option>
                            </select>
                        </td>
                        <th class = 'th'>备注</th>
                        <td class = 'td'>
                            <input class = 'input' id="text3"  value="" type = 'text' style = 'padding-left:5px' />
                        </td>
                    </tr>
                </table>

            </form>
        </div>
    </div>
    </body>
</html>